<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  <title>View data</title>
    <style type="text/css">
    body, th, td { font:12px/1.4em Arial,Helvatica; }
    .p_thumb{margin:5px}
    .section_thumb{padding:3px;}
    </style>
    <script type="text/javascript" src="/user_media/jquery-1.3.1.min.js"></script>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAADmWGO07Q7ZeAHCvFNooqIxSjoh_jThdrJdk8SzlNX2n0XDjczhSwpYj6U7eBtP0TrK0h8Q3wBSwx6A" type="text/javascript"></script>
    <script type="text/javascript">
    var map;
    function Load(){
      map = new GMap2(document.getElementById("map_canvas"));
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
      LoadData({{dataset.id}});
    }
    
    var vertexes = [];
    function LoadData(dataset_id){
      $.get("/getdata/" + dataset_id,
        function(data){
          eval('var points=' + data + ';');
          var track_points = points["track_points"];
          for (var i=1; i<track_points.length; ++i) {
            var latlng = new GLatLng(track_points[i].y, track_points[i].x);
            latlng.timestamp = track_points[i].t;
            vertexes.push(latlng);
          }
          var line = new GPolyline(vertexes, "#ff0000", 4);
          var bounds = line.getBounds();
          map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
          map.addOverlay(line);
        });
    }
    
    function LoadPhotos(dataset_id) {
      
    }
    
    function SelectPhoto(id, name){
      document.getElementById("current_photo").style.display = "";
      var div = document.getElementById("photo_preview");
      div.innerHTML = '<img height="240" src="/user_media/medium/' + name + '">';
    }
    
    var tp_markers = [];
    var select_marker = null;
    function EnableMarkerPick(enable){
      if(enable){
        for(var i=0; i<vertexes.length; i+=10){
          var marker = new GMarker(vertexes[i]);
          marker.timestamp = vertexes[i].timestamp;
          map.addOverlay(marker);
          tp_markers.push(marker);
          GEvent.addListener(marker, "click", SelectMarker);
        }
      }else{
        for(var i=0; i<tp_markers.length; ++i){
          map.removeOverlay(tp_markers[i]);
        }
      }
    }
    
    function SelectMarker(marker){
      select_marker = marker;
      var div = document.getElementById("geo_info");
      div.innerHTML = marker; //marker.getLatLng().lat() + "," + marker.getLatLng().lng();
    }
    
    function UpdatePhotoLocation(){
      if(select_marker==null){
        alert('No location selected.');
      }else{
        alert(select_marker.timestamp);
      }
    }
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body onload="Load()">
  <table>
  <tr><td><div align="center">{{dataset.name}}</div></td><td></td></tr>
    <tr>
      <td valign="top">
        <div class="map" id="map_canvas" style="width:600px;height:360px;background:#00aaaa"></div>
        <input type="button" value="Show track points." onclick="EnableMarkerPick(true)">
        <input type="button" value="Clear points." onclick="EnableMarkerPick(false)">
        
      </td>
      <td valign="top">
      {% if photos %}
      <div class="section_thumb">
        {% for photo in photos %}
        <!--a class="p_thumb" href="/user_media/photos/{{photo.url}}"></a-->
        <img src="/user_media/thumbnails/{{photo.url}}" title="{{photo.title}}" onclick="SelectPhoto({{photo.id}}, '{{photo.url}}')">
        {% endfor %}
      </div>
      {% endif %}
      <div id="current_photo" style="display:none">
      <div id="photo_preview"></div>
      <span id="geo_info"></span>
      <input onclick="UpdatePhotoLocation()" type="button" value="Update photo location">
      </div>
      <div id="upload_photo" style="-moz-border-radius: 5px;-webkit-border-radius: 5px;padding:0.5em;margin-top:1em;background:#ededef">
      <div align="center">Upload a photo</div>
        <form action="" method="post" enctype="multipart/form-data">
            {{ photo_form.as_p }}
            <input type="hidden" name="dataset_id" value="{{dataset.id}}">
            <input type="submit" value="Submit">  
        </form>
      </div>
      </td>
    </tr>
  </table>
  
  <br>
  <a href="/newdata/">Upload new GPX data.</a>
  </body>
</html>
